<template>
  <a-modal
    ref="printDom1"
    :mask-closable="false"
    :visible="airportInfoVisibleF"
    title=""
    :width="350"
    class="airport-info-modal"
    ok-text="保存"
    cancel-text="关闭"
    :z-index="modalZIndexM"
    :confirm-loading="modifyAirportRemarkLoading"

    @cancel="cancelHandler"
  >
    <span slot="closeIcon" class="airinfo-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

    <div class="air-info-title fw-500">机场详细信息</div>

    <div class="mt-15">
      <span class="fw-b">三字码：</span>
      <span>{{ airInfo.threeCode||'--' }}</span>
    </div>

    <div class="mt-15">
      <span class="fw-b">四字码：</span>
      <span>{{ airInfo.fourCode||'--' }}</span>
    </div>
    <div class="mt-15">
      <span class="fw-b">名称：</span>
      <span>{{ airInfo.name||'--' }}</span>
    </div>
    <div class="mt-15">
      <span class="fw-b">国家：</span>
      <span>{{ airInfo.county||'--' }}</span>
    </div>
    <div class="mt-15">
      <span class="fw-b">城市：</span>
      <span>{{ airInfo.city||'--' }}</span>
    </div>
    <div class="mt-15">
      <span class="fw-b">时区：</span>
      <span>GMT{{ airInfo.gmt>0?`+${airInfo.gmt}`:airInfo.gmt }}小时</span>
    </div>
    <div class="mt-15">
      <span class="fw-b">经纬度：</span>
      <span>{{ airInfo.longitude||'--' }}，{{ airInfo.latitude ||'--' }}</span>
    </div>
    <div class="mt-15">
      <span class="fw-b">高原机场：</span>
      <span>{{ airInfo.plateauAirportShow ||'--' }}</span>
    </div>
    <div class="mt-15 mb-10">
      <span class="fw-b">机场备注：</span>
    </div>
    <a-textarea
      :value="airInfo.airportRemarks"
      class="air-info-textarea"
      readonly
      style="width: 100%"
      :auto-size="{ minRows: 3 }"
    />
    <div class="mt-15 mb-10">
      <span class="fw-b">备注：</span>
    </div>
    <a-textarea
      v-model="airInfoRemark"
      class="air-info-textarea"
      style="width: 100%"
      :auto-size="{ minRows: 3 }"
    />

    <template slot="footer" class="air-info-footer">
      <a-button key="back" @click="printpage">
        打印
      </a-button>
      <a-button key="submit" v-permission="1200" type="primary" :loading="modifyAirportRemarkLoading" @click="handleOk">
        保存
      </a-button>
    </template>
    <!-- <a-row :gutter="100">
      <a-col v-if="airInfo.name" :span="24">
        <a-descriptions title="机场详细信息" :column="1">
          <a-descriptions-item>
            <span slot="label" class="fw-b">三字码</span>

          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fw-b">四字码</span>
            {{ airInfo.fourCode||'--' }}
          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fw-b">名字</span>
            {{ airInfo.name||'--' }}
          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fw-b">国家</span>
            {{ airInfo.county||'--' }}
          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fw-b">城市</span>
            {{ airInfo.city ||'--' }}
          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fw-b">时区</span>
            GMT{{ airInfo.gmt>0?`+${airInfo.gmt}`:airInfo.gmt }}小时
          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fw-b">经纬度</span>
            {{ airInfo.longitude||'--' }}，{{ airInfo.latitude ||'--' }}
          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fw-b">备注</span>
            <a-textarea
              v-model="airInfoRemark"
              style="width: 100%"
              :auto-size="{ minRows: 2, maxRows: 6 }"
            />
          </a-descriptions-item>

        </a-descriptions>
      </a-col>

    </a-row> -->
  </a-modal>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
export default {

  data() {
    return {
      currentAirportInfo: {},
      modalZIndexM: 2000,
      airInfo: {},
      airInfoRemark: ''
    };
  },
  computed: {
    ...mapState('fraMonitoring', [
      'depList',
      'arrList',
      'modifyAirportRemarkLoading',
      'modalZIndex',
      'getAirportDetailLoading',
      'airportDetailFra'
    ]),
    ...mapGetters('fraMonitoring', [
      'airportInfoVisibleF'
    ])
  },
  watch: {
    'airportInfoVisibleF'(nv) {
      if (nv) {
        this.setState({ key: 'modalZIndex', payload: this.modalZIndex + 1 });
        this.apInfoCode = localStorage.getItem('apInfoCode');
        this.modalZIndexM = this.modalZIndex;
        this.getInfo();
      }
    }
  },
  methods: {
    ...mapActions('fraMonitoring', [
      'modifyAirportRemark',
      'getFtmAirportList',
      'getAirportDetailFra'
    ]),
    ...mapMutations('fraMonitoring', [
      'setState'
    ]),
    async getInfo() {
      await this.getAirportDetailFra({ threeCode: this.apInfoCode });
      this.airInfo = { ...this.airportDetailFra };
      this.airInfoRemark = this.airInfo.remark;
    },
    // 关闭
    cancelHandler() {
      this.setState({ key: 'airportInfoVisible', payload: false });
    },
    // 打印
    printpage() {
      document.querySelector('.airport-info-modal .ant-modal-footer').style.display = 'none';
      document.querySelector('.airport-info-modal .airinfo-close-icon').style.display = 'none';
      this.$nextTick(() => {
        this.$print(this.$refs.printDom1, {
          printDoneCallBack: () => {
            document.querySelector('.airport-info-modal .ant-modal-footer').style.display = 'block';
            document.querySelector('.airport-info-modal .airinfo-close-icon').style.display = 'block';
          }
        });
      });
    },
    handleOk() {
      const params = [];
      if (this.airInfoRemark !== this.airInfo.remark) {
        params.push({
          id: this.airInfo.id,
          remark: this.airInfoRemark
        });
        this.modifyAirportRemark(params).then(async res => {
          if (res) {
            this.cancelHandler();
          }
        });
      }
    }
  }
};
</script>

<style lang="less">
@import './index.less';
</style>
